<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
    body{
        margin: 0;
    }
    header{
        height:700px;
        background-image:url(4.jpg);
        background-size: cover;
        display: flex;
        align-items:center;
        justify-content:center;
    }
    button{
        top: 100px;
        width:100px;
        height:50px;
        position:relative;
        background-color:transparent;
        font-size:24px;
        color: #fff;
        border:1px solid skyblue;
        outline: none;
        border-radius:10px;
        cursor: pointer;
    }
    button:hover{
        background-color: #fff;
        color:skyblue;
    }
    div{
        height:300px;
        display: flex;
        align-items: center;
        justify-content:center;


    }
    span{
        font-size:64px;
        color:skyblue;
    }
    article{
        height:600px;
        background-image: url(3.jpg);
        background-attachment:fixed;

    }
    main{
        height: 580px;
        position: relative;
    }
    main>img{
        position:absolute;
        bottom: 0;
        left: 180px;
    }
    main>aside{
        width: 500px;
        position: absolute;
        top: 100px;
        right: 200px;
        text-align:right;
        color: black;
    }
    aside>h1{
        font-size: 40px;
    }
    aside>p{
        font-size: 20px;
        color: #555;
    }
    aside>p>a{
        text-decoration: none;

        color: #12b7f5;
    }
    map{
        display: block;
        width: 100%;
        height: 600px;
    }
    section{
        height:380px;
        display: flex;
        align-items:center;
        justify-content:center;
    }
    section>img{
        margin:50px;
    }
    nav{
        height: 80px;
        width: 100%;
        background-color:rgba(18,183,245,0.5);
    }
    video{
        width: 100%;
    }
    li{
        line-height: 80px;
        display: inline-block;
        padding: 0 30px;
        cursor: pointer;
    }
    li:hover{
        background-color: #12b7f5;
    }
    li>a{
        text-decoration: none;
        font-size: 22px;
        color: #fff;
    }
    nav img{
        position: relative;
        top: 15px;
        margin: 0 50px;
    }
    footer{
        height: 380px;
        background-color: #2a2a2a;
    }
    figure{
        width: 1000px;
        margin: 0 auto;
        padding-top: 100px;
        color:#666;
        text-align: center;
    }
    </style>
</head>
<body>
<nav>
<a href=""><img src="12.png" alt="">
<li><a href="">首页</a></li>
<li><a href="">下载</a></li>
<li><a href="">动态</a></li>

</a>
</nav>
<header>
<button>按钮</button>
</header>
<div>
     <span>乐·在·沟·通</span>
</div>
<article></article>
<main>
<img src="7.png" alt="">
<aside>
<h1>沟通，是跨越千山万水的亲切声音</h1>
<p>无论何时何地，你都能享受QQ在各类终端上带来的高清通话，与好友一起想聊多久聊多久。</p>
<p><a href="http://im.qq.com/" "email me">了解更多</a></p>
</aside>

</main>
<map id="here"></map>
<section>
<img src="8.png" alt="">
<img src="9.png" alt="">
<img src="10.png" alt="">
<audio src="陈奕迅 - 红玫瑰.mp3" autobuffer autoloop loop controls></audio>
</section>
<video src="大鱼海棠.mp4" loop controls></video>
<footer>
<hr>
<figure>
<h6>Copyright © 1998-2017 Tencent. All Rights Reserved.</h6>
<h6>陈氏集团有限公司 版权所有</h6>
</figure>
</footer>
</body>
<script src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script>
function initMap() {
    var map = new BMap.Map("here");
    var point = new BMap.Point(108.946023, 34.331407);
    map.centerAndZoom(point, 19);
    window.map = map;
}
initMap();
</script>
</html\p>